<template>
  <div class="container">
    <div class="echarts" ref="echarts"></div>
    <i class="el-icon-caret-left" @click="toLeft"></i>
    <i class="el-icon-caret-right" @click="toRight"></i>
    <span class="catName">{{ catName }}</span>
  </div>
</template>

<script>
import '../../../public/static/theme/chalk.js'

export default {
  name: "Hot",
  data() {
    return {
      chartInstance: null,
      data: null,
      currentIndex: 0, // 当前展现出的分类数据

    }
  },
  computed: {
    catName() {
      if (!this.data) {
        return ''
      } else {
        return this.data[this.currentIndex].name
      }
    }
  },
  mounted() {
    this.initChartInstance()
    this.getData()
    window.addEventListener("resize", this.screenAdapter)
    this.screenAdapter()
  },
  destroyed() {
    window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
    initChartInstance() {
      this.chartInstance = this.$echarts.init(this.$refs.echarts, 'chalk')
      const initOption = {
        title: {
          text: '😄 热销商品',
          top: 40,
          left: 40
        },
        series: [{
          type: 'pie',
          label: {
            show: false
          },
          emphasis: {
            label: {
              show: true
            },
            labelLine: {
              show: false
            }
          }
        }],
        legend: {
          icon: 'circle',
          top: 20
        },
        tooltip: {
          show: true,
          formatter: (arg) => {
            const thirdCategory = arg.data.children
            // 计算出所有三级分类的数值总和
            let total = 0
            thirdCategory.forEach(item => {
              total += item.value
            })
            let retStr = ''
            thirdCategory.forEach(item => {
              retStr += `${item.name} : ${parseInt(parseInt(item.value) / total * 100) + '%'}<br/> `
            })
            return retStr
          }
        },
      }
      this.chartInstance.setOption(initOption)
    },
    async getData() {
      // 获取服务器的数据，对this.data 进行赋值之后，调用updateChart方法更新图表
      const {data: res} = await this.$http.get('hotproduct')
      this.data = res
      // console.log(this.data);

      this.updateChart()
    },
    updateChart() {
      // 处理图表需要的数据
      const seriesData = this.data[this.currentIndex].children.map(item => {
        return {
          name: item.name,
          value: item.value,
          children: item.children
        }
      })
      const dataOption = {
        series: [{
          data: seriesData
        }]
      }
      this.chartInstance.setOption(dataOption)
    },
    screenAdapter() {
      // 自适应分辨率
      const titleFontSize = this.$refs.echarts.offsetWidth / 100 * 3.6
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize
          }
        },
        legend: {
          itemWidth: titleFontSize / 2,
          itemHeight: titleFontSize / 2,
          itemGap: titleFontSize / 2,
          textStyle: {
            fontSize: titleFontSize / 2
          }
        },
        series: [{
          radius: titleFontSize * 5.5,
          center: ['50%', '50%']
        }]
      }
      this.chartInstance.setOption(adapterOption)
      this.chartInstance.resize()

    },
    toLeft() {

      this.currentIndex--
      if (this.currentIndex < 0) {
        this.currentIndex = this.data.length - 1
      }
      this.updateChart()
    },
    toRight() {

      this.currentIndex++
      if (this.currentIndex > this.data.length - 1) {
        this.currentIndex = 0
      }
      this.updateChart()

    }
  }
}
</script>

<style scoped>
.echarts {
  height: 800px;
  width: 100%;
}

.el-icon-caret-left {
  position: absolute;
  top: 45%;
  left: 150px;
  font-size: 100px;
  color: #02a6b5;
}

.el-icon-caret-right {
  position: absolute;
  top: 45%;
  right: 150px;
  font-size: 100px;
  color: #02a6b5;
}

.catName {
  font-size: 30px;
  color: white;
  position: absolute;
  top: 83%;
  left: 48.5%;
}


</style>
